<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user">
			<view class="avatar">
				<image src="/static/logo.png" v-if="!business.avatar_text"></image>
				<image :src="business.avatar_text" v-else></image>
			</view>
			<!-- 名字 -->
			<view class="nickname" v-if="!business.nickname">请先登录</view>
			<view class="nickname" v-else>{{business.nickname}}</view>

			<!-- 登录按钮 -->
			<view class="loginBtn" v-if="!business.id">
				<!-- #ifdef H5 || APP-PLUS -->
				<u-button type="primary" :plain="true" :hairline="true" text="立即登录" @click="login"></u-button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<u-button type="primary" :plain="true" :hairline="true" text="授权登录" @click="authLogin"></u-button>
				<!-- #endif -->
			</view>
		</view>

		<!-- 菜单 -->
		<view class="menulist">
			<u-cell-group v-if="business.id">
				<u-cell icon="account-fill" title="个人主页" :isLink="true" url="/pages/business/center"></u-cell>
				<u-cell icon="account-fill" title="基本资料" :isLink="true" url="/pages/business/profile"></u-cell>
				<u-cell icon="coupon" title="邮箱认证" :isLink="true" url="/pages/business/email" v-if="!business.auth"></u-cell>
				<u-cell icon="integral-fill" title="我的提问" :isLink="true" url="/pages/business/post"></u-cell>
				<u-cell icon="tags-fill" title="我的关注" :isLink="true" url="/pages/business/follow"></u-cell>
				<u-cell icon="email-fill" title="我的私信" :isLink="true" url="/pages/business/message"></u-cell>
				<!-- #ifdef H5 || APP-PLUS -->
				<u-cell icon="rmb" title="余额充值" :isLink="true" url="/pages/business/pay"></u-cell>
				<!-- #endif -->
				<u-cell icon="pushpin-fill" title="每日签到" :isLink="true" url="/pages/business/checkin"></u-cell>
				<u-cell icon="share-square" title="退出登录" :isLink="true" @click="show = true"></u-cell>
			</u-cell-group>
			<u-cell-group v-else>
				<u-cell icon="account-fill" title="个人主页"></u-cell>
				<u-cell icon="account-fill" title="基本资料"></u-cell>
				<u-cell icon="coupon" title="邮箱认证"></u-cell>
				<u-cell icon="integral-fill" title="我的提问"></u-cell>
				<u-cell icon="tags-fill" title="我的关注"></u-cell>
				<u-cell icon="email-fill" title="我的私信"></u-cell>
				<!-- #ifdef H5 || APP-PLUS -->
				<u-cell icon="rmb" title="余额充值"></u-cell>
				<!-- #endif -->
				<u-cell icon="pushpin-fill" title="每日签到"></u-cell>
			</u-cell-group>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<!-- #ifdef H5 || APP-PLUS -->
		<u-modal :show="show" :title="'退出提醒'" :content="'是否确认退出'" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="logout"></u-modal>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-modal :show="show" :title="'退出提醒'" :content="'是否确认退出'" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="logoutAuth"></u-modal>
		<!-- #endif -->

	</view>
</template>

<script>
export default {
	onShow: function () {
		this.business = uni.getStorageSync('business') ?? {};
	},
	data() {
		return {
			show: false,
			business: {}
		}
	},
	methods: {
		logout() {
			this.show = false
			this.$refs.notice.show({
				message: "退出成功",
				duration: 1000,
				complete: () => {
					this.business = {}
					uni.removeStorageSync('business');
					uni.navigateTo({
						url: '/pages/business/login'
					})
				}
			})
		},
		logoutAuth() {
			this.show = false
			this.$refs.notice.show({
				message: "退出成功",
				duration: 1000,
				complete: () => {
					this.business = {}
					uni.removeStorageSync('business');
				}
			})
		},
		authLogin() {
			// 获取code
			uni.login({
				provider: 'weixin', //使用微信登录
				success: async (loginRes) => {
					const code = loginRes.code ?? "";
					if (!code) {
						this.$refs.notice.show({
							type: 'error',
							message: '未获得登录凭证',
						})
					}
					// 将code发送给后端服务器
					let result = await uni.$u.http.post('/business/authLogin', { code })
					if (result.code) {
						// 判断是否带有id，没有的话跳转登录界面绑定账号，否则直接登录
						const openid = result.data.openid ?? "";
						const id = result.data.id ?? "";
						if (!id) {
							// 跳转登录界面
							this.$refs.notice.show({
								type: "success",
								message: result.msg,
								duration: 1000,
								complete: () => {
									uni.$u.route({
										url: result.url,
										params: { openid },
									})
								}
							})
						} else {
							this.$refs.notice.show({
								type: "success",
								message: result.msg,
								duration: 1000,
								complete: () => {
									// 缓存数据
									this.business = result.data
									uni.setStorageSync('business', result.data);
								}
							})
						}
					} else {
						this.$refs.notice.show({
							type: "error",
							message: result.msg
						})
					}
				}
			});
		},
		login(){
			uni.$u.route({
				url: 'pages/business/login',
			})
		}
	}
}
</script>


<style>
/* 用户信息 */
.user {
	width: 100%;
	padding: 40rpx 0rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
	color: white;
}

.avatar {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	overflow: hidden;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.nickname {
	font-size: 30rpx;
	font-weight: bold;
	margin: 10rpx 0;
}

.login {
	width: 120px !important;
	color: #fff;
	background-color: #4ea9f5;
	margin-top: 20rpx;
	font-size: 30rpx;
	padding: .5em .2em;
}

/* 菜单 */
.menulist {
	width: 100%;
}

.item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: auto;
	width: auto;
	padding: 20rpx 50rpx;
	border-bottom: 20rpx solid rgb(234, 234, 234);
	font-size: 26rpx;
	box-shadow: 0 0 10px #DDD;
}

.item image {
	height: 36rpx;
	width: 36rpx;
}
</style>